import React from 'react'
import { connect } from 'react-redux'
class Cover extends React.Component {
    state = {
        isStart: false,
        coverImg: require('./static/title.png'),
        staring: false
    }
    startGame = () => {
        this.setState({
            staring: true
        })
        setTimeout(() => {
            this.props.startGame()
        },500)
    }
    render (){
        const { staring } = this.state
        return (
            <div className={this.props.gameState === 'start' ? 'cover' : 'cover hide'} style={{
                opacity: staring ? 0 : 1
            }}>
            <img src={this.state.coverImg} alt="打砖块小游戏标题" className="title" />
            <p className="rule">游戏规则:鼠标左键发射小球，移动鼠标拖动挡板，直到生命耗尽</p>
            <button className="start-btn" onClick={this.startGame}>开始游戏</button>
        </div>
        )
    }
}
const mapState = (state) => {
    return {
        gameState: state.game
    }
}
const mapActions = (dispatch) => {
    return {
        startGame: () => {
            dispatch({
                type: 'play'
            })
        }
    }
}
export default connect(mapState, mapActions)(Cover)